import React from 'react'
import '../assets/css/myproject.css'
import { RightOutlined } from '@ant-design/icons'
import { useState } from 'react'
import {Modal,message,Drawer,Table,Select,Tree} from 'antd'
import { useEffect } from 'react'
const { TreeNode } = Tree;
export default function Louyu(props) {
  let [createNew,setCreateNew] = useState(false)
  let [drawer,setDrawer] = useState(false)
  let [drawerAdd,setDrawerAdd] = useState(false)
  let [isdelopen,setIsdelopen] = useState(false)
  let [addmodal,setAddmodal] = useState(false)
  let [quanxian,setQuanxian] = useState(false)
  const [checkedKeys, setCheckedKeys] = useState([]);;//树形选择列表''
  let [allkeys,setAllkeys] = useState([])
  let [issave,setIssave] = useState(false)
  let [iszhuanrang,setIszhuanrang] = useState(false)
  let [istuichu,setIstuichu] = useState(false)//退出项目
  let [updatedMyjia,setUpdatedMyjia] = useState([])
  let [updatemyproject,setUpdatemyproject] = useState([])
  let [newproName,setNewproName] = useState('') //新建项目的项目名
  const mytitle = React.createRef()
 
  const phoneChoose = [
    {label:'移动',value:'移动'},
    {label:'联通',value:'联通'},
    {label:'电信',value:'电信'}
  ]

  let projectname = props.DropData
  console.log(projectname);
  
  const [editProname,setEditProname] = useState(false)
  
  const getImg=(url)=>{
    return new URL(url,import.meta.url).href
  }
  let [myProject,setMyProject] = useState([
    {
      name:projectname,
      tips:['招商','运营'],
      num:10
    },
    {
      name:projectname,
      tips:['招商'],
      num:6
    }
  ])
  let [myjia,setMyjia] = useState([
    {
      name:projectname,
      tips:['招商','运营'],
      num:10,
      jie:false
    },
    {
      name:projectname,
      tips:['招商','运营'],
      num:6,
      jie:false
    },
    {
      name:projectname,
      tips:['招商'],
      num:10,
      jie:true
    },
    {
      name:projectname,
      tips:['招商'],
      num:6,
      jie:true
    }
  ])


  const columns = [
    {
      title: '登录账号',
      dataIndex: 'zhanghao',
      key: 'zhanghao',
    },
    {
      title: '备注姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '项目加入时间',
      dataIndex: 'time',
      key: 'time',
    }
  ]
  
  const data = [
    {
      key: '1',
      zhanghao: '+86 13301201756',
      name: '王力宏',
      time: '2019/08/24',
    },
    {
      key: '2',
      zhanghao: '+86 13301201756',
      name: '王力宏',
      time: '2019/08/24',
    },
    {
      key: '3',
      zhanghao: '+86 13301201756',
      name: '王力宏',
      time: '2019/08/24',
    },
    {
      key: '4',
      zhanghao: '+86 13301201756',
      name: '王力宏',
      time: '2019/08/24',
    }
  ];
  const [data2, setData2]= useState([
    {
      key: '1',
      zhanghao: '13301201756',
      name: '王力宏',
      isManager: true,
      status: '正常',
      isEditing: false,
    },
    {
      key: '2',
      zhanghao: '13301201756',
      name: '王力宏',
      isManager: false,
      status: '已退出',
      isEditing: false,
    },
    {
      key: '3',
      zhanghao: '13301201756',
      name: '王力宏',
      isManager: false,
      status: '未激活',
      isEditing: false,
    },
    {
      key: '4',
      zhanghao: '13301201756',
      name: '王力宏',
      isManager: false,
      status: '已拒绝',
      isEditing: false,
    }
  ]);
  const columns2 = [
    {
      title: '登录账号',
      dataIndex: 'zhanghao',
      key: 'zhanghao',
      align:'center',
      render:(text,record)=>{
        return  <span className='isManage'>
                  {text}
                 
                  {record.isManager && <span>管理员</span>}
                </span>
      }
    },
    {
      title: '备注姓名',
      dataIndex: 'name',
      key: 'name',
      align:'center',
      render:(text,record)=>{
        let isEditing = record.isEditing;
        const changename = React.createRef()
        const handleInputChange = (e) => {
          const newData = data2.map(item => {
            if (item.key === record.key) {
              return { ...item, name: e.target.value };
            }
            return item;
          });
          setData2(newData);
        };
        // 点击编辑按钮
        const handleStartEdit = () => {
          
          const newData = data2.map(item => {
            if (item.key === record.key) {
              return { ...item, isEditing: true };
            }
            return item;
          });
          setData2(newData);
          if (changename.current) {
            changename.current.style.border = '1px solid #8479E3';
            changename.current.style.padding = '3px';
            changename.current.style.width = '58px';
            changename.current.focus();
          }
        };
        // 点击保存按钮
        const handleSaveEdit = () => {
          
          console.log(111);
          
            inn()
            
          const newData = data2.map(item => {
            if (item.key === record.key) {
              
              isEditing=false
              return { ...item, isEditing: false };
            }
            console.log(isEditing);
            
            return item;
          });
          setData2(newData);
          
          
        };
        const handleKeyDown = (e) => {
          if (e.key === 'Enter') {
            handleSaveEdit();
          }
        };

        const inn = ()=>{
          if(!isEditing){
            changename.current.style.border = '1px solid red';
            changename.current.style.padding = '0';
            changename.current.style.width = 'auto';
            changename.current.focus()
          }
        }
        return  <span className='beizhu-name'>
                
                  <div>
                    <input readOnly={!isEditing} ref={changename}  onChange={handleInputChange} onKeyDown={handleKeyDown} value={text} style={{
                        
                        border: isEditing ? '1px solid #8479E3' : 'none',
                        padding: isEditing ? '3px' : '0',
                        width: isEditing ? '58px' : '48px'
                      }}></input>
                   </div>
                    {isEditing ?
                    <span onClick={()=>{handleSaveEdit()}}>保存</span>
                 
                  :
                  <div>
                    
                    <img  onClick={handleStartEdit} src={getImg('../assets/images2/edit.png')}></img>
                  </div>}

                  
                </span>
      }
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align:'center',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'action',
      align:'center',
      render: (text, record) => (
        <span className='add-action'>
          {console.log(record.isEditing)
          }
          <span className={`quan ${record.isEditing ? 'highlight' : ''}`} onClick={()=>record.isEditing&&setQuanxian(true)}>权限</span>
          <span className='shan' onClick={()=>{setIsdelopen(true)}}>删除</span>
        </span>
      ),
    }
  ]

  const treeData = [
    {
      title: '项目',
      key: '1',
      children: [
        {
          title: '人员管理',
          key: '1-1',
          isLeaf:true
        },
      ],
    },
    {
      title: '客户',
      key: '2',
      children: [
        {
          title: '客户管理',
          key: '2-1',
          children: [
            {
              title: '新建',
              key: '2-1-1',
              isLeaf:true
            },
            {
              title: '编辑',
              key: '2-1-2',
              isLeaf:true
            },
            {
              title: '查看',
              key: '2-1-3',
              isLeaf:true
            },
            {
              title: '删除',
              key: '2-1-4',
              isLeaf:true
            },
          ],
        },
      ],
    },
    {
      title: '资产',
      key: '3',
      children: [
        {
          title: '楼宇',
          key: '3-1',
          children: [
            {
              title: '新建',
              key: '3-1-1',
              isLeaf:true
            },
            {
              title: '编辑',
              key: '3-1-2',
              isLeaf:true
            },
            {
              title: '查看',
              key: '3-1-3',
              isLeaf:true
            },
            {
              title: '删除',
              key: '3-1-4',
              isLeaf:true
            },
          ],
        },
        {
          title: '空间',
          key: '3-2',
          children: [
            {
              title: '新建',
              key: '3-2-1',
              isLeaf:true
            },
            {
              title: '编辑',
              key: '3-2-2',
              isLeaf:true
            },
            {
              title: '查看',
              key: '3-2-3',
              isLeaf:true
            },
            {
              title: '删除',
              key: '3-2-4',
              isLeaf:true
            },
            {
              title: '上架',
              key: '3-2-5',
              isLeaf:true
            },
            {
              title: '下架',
              key: '3-2-6',
              isLeaf:true
            },
          ],
        },
      ],
    },
    {
      title: '招商',
      key: '4',
      children: [
        {
          title: '空间定价',
          key: '4-1',
          children: [
            {
              title: '查看',
              key: '4-1-1',
              isLeaf:true
            },
            {
              title: '编辑单位租金',
              key: '4-1-2',
              isLeaf:true
            },
          ],
        },
        {
          title: '租控',
          key: '4-2',
          children: [
            {
              title: '查看',
              key: '4-2-1',
              isLeaf:true
            },
            {
              title: '暂停招商',
              key: '4-2-2',
              isLeaf:true
            },
            {
              title: '恢复招商',
              key: '4-2-3',
              isLeaf:true
            },
          ],
        },
        {
          title: '租约',
          key: '4-3',
          children: [
            {
              title: '新建新租租约',
              key: '4-3-1',
              isLeaf:true
            },
            {
              title: '编辑',
              key: '4-3-2',
              isLeaf:true
            },
            {
              title: '作废',
              key: '4-3-3',
              isLeaf:true
            },
            {
              title: '查看',
              key: '4-3-4',
              isLeaf:true
            },
            {
              title: '删除',
              key: '4-3-5',
              isLeaf:true
            },
          ],
        },
      ],
    },
    {
      title: '运营',
      key: '5',
      children: [
        {
          title: '租期',
          key: '5-1',
          children: [
            {
              title: '新建',
              key: '5-1-1',
              isLeaf:true
            },
            {
              title: '查看',
              key: '5-1-2',
              isLeaf:true
            },
          ],
        },
        {
          title: '报修',
          key: '5-2',
          children: [
            {
              title: '查看',
              key: '5-2-1',
              isLeaf:true
            },
            {
              title: '分配',
              key: '5-2-2',
              isLeaf:true
            },
            {
              title: '解决',
              key: '5-2-3',
              isLeaf:true
            },
            {
              title: '保修设置',
              key: '5-2-4',
              isLeaf:true
            },
          ],
        },
        {
          title: '公告管理',
          key: '5-3',
        },
        {
          title: '物业须知管理',
          key: '5-4',
        },
        {
          title: '管理员反馈',
          key: '5-5',
        },
      ],
    },
  ];
// 树形组件水平排列
const renderTreeNodes = (data) =>
  data.map((item) => {
    if (item.children) {
      return (
        <TreeNode title={item.title} key={item.key}>
          {renderTreeNodes(item.children)}
        </TreeNode>
      );
    }
    return <TreeNode {...item} key={item.key} className='leaf-node' />;
  });

const drawerclose = () => {
  setDrawer(false);
};

// 树形节点全选
function collectKeys(node) {
  // 如果节点有 children 属性，则递归收集子节点的 key
  if (node.children && node.children.length > 0) {
    return node.children.reduce((keys, child) => {
      return keys.concat(collectKeys(child));
    }, [node.key]);
  } else {
    // 如果没有 children 属性，直接返回当前节点的 key
    return [node.key];
  }
}

  // console.log(allkeys);
  
  // console.log(checkedKeys);
    
const checkall = ()=>{
  const allKeys  = treeData.reduce((keys, item) => {
    return keys.concat(collectKeys(item));
  }, []);
  setCheckedKeys(allKeys);
  console.log(issave);
  
  console.log(checkedKeys);
  
}
    useEffect(()=>{
      
      console.log(issave);
      if(issave){
        setCheckedKeys(allkeys);
        console.log(checkedKeys);
      }
      
      
    })
    const onTreeCheck =  (checkedKeys, info) => {
      console.log('onCheck', checkedKeys, info.checkedNodes);
      setCheckedKeys(checkedKeys);
    };
  return (
    <>
    <div className='myproject'>
      <div className="myfu">
        <div className="title">我负责的项目</div>
        <ul>
          {
            myProject.map((item,index)=>{
              return <li key={index}>
                <p className='name'>
                  {item.name}
                  <img src={getImg('../../assets/images2/jiben.png')} alt="" />
                </p>
                <div className='tips'>{
                  item.tips.map((tip,tipindex)=>{
                    return <span key={tipindex}>{tip}</span>
                  })
                }</div>
                <p className='num'>人员({item.num})<RightOutlined/></p>
                {/* <div className='gotopro' onClick={()=>{setDrawer(true)}}>进入项目</div> */}
                <div className='pro-action'>
                  <p className='qian' onClick={()=>{setIszhuanrang(true);setUpdatemyproject(myProject.filter((_, i) => i !== index))}}>转让</p>
                  <p className='shen' onClick={()=>{setDrawer(true)}}>人员管理</p>
                </div>
              </li>
            })
          }
          <li className='newpro' onClick={()=>{
            setCreateNew(true)
          }}>
            <img src={getImg('../assets/images2/新建.png')} alt="" />
           
          </li>
        </ul>
        <Drawer extra={<div className="zhuan-shan">
                        <span className='zhuan'>转让</span>
                        <span className='del'>删除</span>
                      </div>} 
                title={<div className="top">
                        <span ref={mytitle}>北京国贸项目</span>&nbsp;
                        {!editProname&&<img onClick={()=>{
                            mytitle.current.style.borderBottom='1px solid  #8479E3';
                            setEditProname(true)
                        }} className='edit-icon' src={getImg('../assets/images2/edit.png')} alt="" /> }
                        {editProname&&
                         <div>
                           <span className='top-xian'></span>
                           <span className='save' onClick={()=>{
                            mytitle.current.style.borderBottom='none';
                            setEditProname(false)
                        }}>保存</span>
                         </div>
                        }
                      
                      </div>}
                width={720} 
                closable={false} 
                onClose={drawerclose} 
                open={drawer}>
                    <div className="drawer-container">
                      <div className="ji-info">
                        <div className="title">基础信息</div>
                        <div className="info-content">
                          <div className="left">
                            <span className='renyuan'>项目管理员</span>
                            <p>刘备</p>
                          </div>
                          <div className="right">
                            <span className='renyuan'>项目创建时间</span>
                            <p>2019/08/30&nbsp;12:32:30</p>
                          </div>
                        </div>
                      </div>
                      <div className="pro-people">
                        <div className="title">
                          <p>项目人员</p>
                          <span onClick={()=>{setDrawerAdd(true)}}>管理</span>
                        </div>
                        <Table align={'center'} columns={columns} width={200} dataSource={data} pagination={false}/>
                      </div>
                      <div className="pro-mokuai">
                        <div className="title">项目模块</div>
                        <div className="modal">
                            <div className="modal-content">                   
                                <div className="kaimo">
                                  <ul className='mokuai-items'>
                                    <li className='one'>
                                      <div className="li-title">招商</div>
                                      <p className="small-tip">
                                        <span>空间定价</span>
                                        <span className='xian'>|</span>
                                        <span>租控</span>
                                        <span className='xian'>|</span>
                                        <span>租约</span>
                                        </p>
                                      <div className="btn one-btn">开通</div>
                                    </li>
                                    <li className='one'>
                                      <div className="li-title">运营</div>
                                      <p className="small-tip">
                                        <span>公告</span>
                                        <span className='xian'>|</span>
                                        <span>服务保障</span>
                                        <span className='xian'>|</span>
                                        <span>投诉建议</span>
                                        </p>
                                      <div className="btn two-btn">已开通</div>
                                    </li>
                                    <li className='one'>
                                      <div className="li-title">社区</div>
                                      <p className="small-tip">
                                        <span>即将上线~</span>
                                      </p>
                                    </li>
                                    <li className='one'>
                                      <div className="li-title">设备设施</div>
                                      <p className="small-tip">
                                        <span>即将上线~</span>
                                      </p>
                                    </li>
                                    <li className='one'>
                                      <div className="li-title">增值服务</div>
                                      <p className="small-tip">
                                        <span>即将上线~</span>
                                      </p>
                                    </li>
                                    <li className='one'>
                                      <div className="li-title">数据</div>
                                      <p className="small-tip">
                                        <span>即将上线~</span>
                                      </p>
                                    </li>
                                  </ul>
                                </div>
                            </div>
                        </div>
                      </div>
                    </div>
        </Drawer>
        {/* 人员管理 */}
        <Drawer extra={<div className="add-people">
                          <span className='add' onClick={()=>setAddmodal(true)}>配置人员</span>
                        </div>} 
                title={<div className="top">
                          人员管理
                      </div>}
                width={720} 
                closable={false} 
                onClose={drawerclose} 
                open={drawerAdd}>
                    <div className="drawer-container add-container">
                      <div className="pro-people">
                        <Table align={'center'} columns={columns2} width={200} dataSource={data2} pagination={false}/>
                      </div>
                      <div className="cha" onClick={()=>setDrawerAdd(false)}>×</div>
                    </div>
        </Drawer>
      </div>
      <div className="myjia">
        <div className="title">我加入的项目</div>
        <ul>
          {
            myjia.map((item,index)=>{
              return <li key={index}>
                <p className='name'>
                  {item.name}
                  <img src={getImg('../assets/images2/jiben.png')} alt="" />
                </p>
                <div className='tips'>{
                  item.tips.map((tip,tipindex)=>{
                    return <span key={tipindex}>{tip}</span>
                  })
                }</div>
                <p className='num'>人员({item.num})<RightOutlined/></p>
                {item.jie?<div className='gotopro'>进入项目</div>
                  :
                  <div className='isJie'>
                    <p className='jujue' onClick={()=>{setIstuichu(true);setUpdatedMyjia(myjia.filter((_, i) => i !== index));}}>拒绝</p>
                    <p className='jieshou' onClick={()=>{
                      const updatedMyjia  = myjia.map((item, i) => {
                        if (i === index) {
                          return { ...item, jie: true };
                        }
                        return item;
                      });
                      setMyjia(updatedMyjia);
                    }}>接受</p>
                  </div>
                }
              </li>
            })
          }
        </ul>
      </div>
      
    </div>
    {/* 新建项目 */}
    <Modal
      width={708}
      open={createNew}
      footer={false}
      onCancel={()=>{
        // 点击取消按钮后的操作
        setCreateNew(false)
      }}
    >
      <div className="modal">
          <div className="title">新建项目</div>
          <div className="modal-content">
              <label htmlFor="" className='pro-name'>
                <p><span>*</span>项目名称&nbsp;:</p>
                <input type="text" value={newproName} onChange={(e)=>{setNewproName(e.target.value)}} placeholder='请输入'/>
              </label>
              <div className="kaimo">
                <p className='kaimo-title'><span>*</span>开通模块&nbsp;:</p>
                <ul className='mokuai-items'>
                  <li className='one'>
                    <div className="li-title">招商</div>
                    <p className="small-tip">
                      <span>空间定价</span>
                      <span className='xian'>|</span>
                      <span>租控</span>
                      <span className='xian'>|</span>
                      <span>租约</span>
                      </p>
                    <div className="btn one-btn">开通</div>
                  </li>
                  <li className='one'>
                    <div className="li-title">运营</div>
                    <p className="small-tip">
                      <span>公告</span>
                      <span className='xian'>|</span>
                      <span>服务保障</span>
                      <span className='xian'>|</span>
                      <span>投诉建议</span>
                      </p>
                    <div className="btn two-btn">已开通</div>
                  </li>
                  <li className='one'>
                    <div className="li-title">社区</div>
                    <p className="small-tip">
                      <span>即将上线~</span>
                    </p>
                  </li>
                  <li className='one'>
                    <div className="li-title">设备设施</div>
                    <p className="small-tip">
                      <span>即将上线~</span>
                    </p>
                  </li>
                  <li className='one'>
                    <div className="li-title">增值服务</div>
                    <p className="small-tip">
                      <span>即将上线~</span>
                    </p>
                  </li>
                  <li className='one'>
                    <div className="li-title">数据</div>
                    <p className="small-tip">
                      <span>即将上线~</span>
                    </p>
                  </li>
                </ul>
                <div className="save" onClick={
                  ()=>{
                    message.open({
                      type:'success',
                      content:'项目保存成功',
                      duration:1
                    })
                    let updateMyProject = myProject.push(
                      {
                        name:newproName,
                        tips:['招商','运营'],
                        num:10
                      },
                    )
                    console.log(updateMyProject);
                    
                    // setMyProject(updateMyProject)
                    setTimeout(() => {
                        setCreateNew(false)
                    }, 1100);
                  }
                  
                  }>保存</div>
              </div>
          </div>
      </div>
    </Modal>
    {/* 确认删除 */}
    <Modal width={380} footer={false} open={isdelopen} onCancel={()=>setIsdelopen(false)}>
        <div className="isdelcontainer">
          <p>此操作是不可恢复的！</p>
          <p>您确认要执行删除操作吗？</p>
          <div>
            <span className='sure' onClick={()=>setIsdelopen(false)}>确认</span>
            <span className='cancel' onClick={()=>setIsdelopen(false)}>取消</span>
          </div>
        </div>
    </Modal>
    {/* 配置(新增)人员 */}
    <Modal width={440} title='添加人员' footer={false} open={addmodal} onCancel={()=>setAddmodal(false)}>
        <div className="addmodal">
          <label htmlFor="" className='label'>
            <div className="title"><span style={{color:'#fb9e9e'}}>*</span>&nbsp;&nbsp;登录账号</div>
            <div className="inp">
              <Select
                    style={{
                      width: 96,
                    }}
                    allowClear
                    options={phoneChoose}
                    placeholder="中国+86"
                  />
              <input type="text" placeholder='请输入'/>
            </div>
          </label>
          <label htmlFor="" className='label label2'>
            <div className="title"><span style={{color:'#fb9e9e'}}>*</span>&nbsp;&nbsp;备注姓名</div>
            <div className="inp">
              <input type="text" placeholder='请输入'/>
            </div>
          </label>
          <div className='save' onClick={()=>setAddmodal(false)}>保存</div>
        </div>
    </Modal>
    {/* 设置人员权限 */}
    <Modal width={576} title='权限配置' footer={false} open={quanxian} onCancel={()=>setQuanxian(false)}>
      <div className="quanxian-peizhi">
         {/* 树形控件 */}
         <Tree
          multiple={true}
          checkable
          defaultCheckedKeys={checkedKeys}
          onCheck={onTreeCheck}
          >{ renderTreeNodes(treeData) }</Tree>
      </div>
      <div className='tree-action'> 
            <div className="chooseall"  onClick={()=>{setIssave(true);checkall()
            }}>选择全部</div>
            <div className="save" onClick={()=>{setQuanxian(false)}}>保存</div>
          </div>
    </Modal>
    {/* 项目转让 */}
    <Modal
      width={440}
      open={iszhuanrang}
      footer={false}
      onCancel={()=>{
        // 点击取消按钮后的操作
        setIszhuanrang(false)
      }}
    >
      <div className="modal iszhuan">
          <div className="title">项目转让</div>
          <div className='zhuanrang'>
            <input type="text" placeholder='项目接收人'/>
          </div>
          <div className="save" onClick={()=>{
            message.open({
              type:'success',
              content:'项目转让成功',
              duration:1
            })
            setMyProject(updatemyproject)
            setTimeout(() => {
              setIszhuanrang(false)
            }, 1010);
          }}>保存</div>
      </div>
    </Modal>
    {/* 项目退出，拒绝 */}
     <Modal width={380} footer={false} open={istuichu} onCancel={()=>setIstuichu(false)}>
        <div className="isdelcontainer">
          <p>您确定要退出北京国贸项目吗？</p>
          <div>
            <span className='sure' onClick={()=>{
              
              console.log(updatedMyjia);
              
              setMyjia(updatedMyjia);
              setIstuichu(false);} }>确认</span>
            <span className='cancel' onClick={()=>setIstuichu(false)}>取消</span>
          </div>
        </div>
    </Modal>
    </>
  )
}
